<template>
  <div v-show="showModal" class="c-pz1002 c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-flex-center">
    <div class="c-translucent-balck50 c-text-hidden c-pz-1 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="closeModal" data-type='cancel'></div>
    <div class="c-ww540 c-bg-white c-flex-column c-pz1 c-br20">
      <div class="c-fs28 c-textAlign-c c-pv50 c-fw-b c-lh">我的群名片</div>
      <div class="c-ph30">
        <input @blur='inputBlur' placeholder="请输入群名片" id="inputMyScailCard" maxlength="16" v-model="inputNikeName" class="input-nikename c-ph24 c-w100 c-hh74 c-fs26 c-br10 c-bg-f6" />
      </div>
      <div class="c-fs20 c-pt20 c-ph30 c-pb48 c-fc-gray c-flex-row c-lh c-justify-sb">
        <span>群昵称仅用于在本群内展示</span>
        <span>{{inputNikeName.length}}/16</span>
      </div>
      <footer class="c-fs20 c-flex-row c-fs28 c-bd-t1">
        <div @click="closeModal" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 c-fc-gray c-bd-r1">取消</div>
        <div @click="onConfirmUpdate" class="c-hh88 c-flex-row c-flex-center c-flex-grow1 c-w0 c-fc-xblue">确定</div>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    socailNikeName: {
      type: String,
      default: ''
    },
  },
  watch: {
    showModal: {
      handler(val, oldVal) {
        if (val) {
          this.inputNikeName = this.socailNikeName
        }
      }
    },
  },
  data() {
    return {
      inputNikeName: '',
    };
  },
  methods: {
    inputBlur() {
      setTimeout(() => {
        document.body && document.body.scrollIntoView(false);
      }, 100);
    },
    closeModal(e) {
      this.$emit("closedModal");
    },
    //改变公告编辑状态
    onConfirmUpdate() {
      if (!this.inputNikeName.trim()) {
        this.$showCjToast({
          text: "群名片不能为空",
          type: "warn",
          time: 1000
        });
        return;
      } else if (this.inputNikeName.length > 16) {
        this.$showCjToast({
          text: "群名片不能超过16个字",
          type: "warn",
          time: 1000
        });
        return;
      }
      this.$emit('onConfirmUpdate', this.inputNikeName)
    },
  },
  activated() {
    this.inputOver = '';
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input-nikename {
  -webkit-appearance: none;
  background: none;
  border: 1px solid #e5e5e5;
}
</style>
